<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小米登录</title>
    <link href="css/style.css" type="text/css" rel="stylesheet" />
    <script src="lib/jquery-3.2.1.js"></script>
  </head>
  <body>
    <header>
      <div class="title">
        <span class="logo">
          <img src="images/mi-logo.png" />
        </span>
        <div class="article">
          <span>小米商城</span>
          <p>让每个人都能享受科技的乐趣</p>
        </div>
      </div>
    </header>

    <div class="content">
      <div class="form">
            <p class="login">
              <a class="current zh" href="#">账号登录</a>
              <a href="#">扫码登录</a>
            </p>
            <img src="images/bg.png" class="bg">

            <div class="box">
              <div class="account">
                <input
                  class="phone"
                  type="text"
                  placeholder="邮箱/手机号码/小米账号"
                /> 
                <input class="password" type="password" placeholder="密码" />
                <button>立即登录</button>
                <p class="end">
                    <span>注册小米账号</span>
                    <span>|</span>
                    <span>忘记密码？</span>
                </p>
                <div class="footer">
                <p class="qita">
                    <span class="left"></span>
                    其他方式登录
                    <span class="right"></span>
                  </p> 
                  <div class="AllIcon">
                    <a href="#"><span class="one"></span></a>
                    <a href="#"><span class="two"></span></a>
                    <a href="#"><span class="three"></span></a>
                    <a href="#"><span class="four"></span></a>
                  </div>
                </div>
              </div>
              <div class="saoma hidden">
                <img src="images/erweima.png">
                <p class="saoyisao">使用<span>小米商城APP</span>扫一扫</p>
                <p>小米手机可打开「设置」>「小米帐号」扫码登录</p>
              </div>
            </div>
      </div>
    </div>

    <footer>
      <span
        >简体&nbsp;&nbsp;|&nbsp;&nbsp;繁体
        &nbsp;&nbsp;|&nbsp;&nbsp;English&nbsp;&nbsp;| &nbsp;&nbsp;常见问题
      </span>
      <p class="beizhu">
        小米公司版权所有-京ICP备10046444-京公网安备
        11010802020134号-京ICP证100507号
      </p>
    </footer>
    <script>
      $(".login a").click(function(){
        $(this).addClass("current").siblings().removeClass("current")
        $(".box>div").eq($(this).index()).show().siblings().hide()
      })
    </script>
  </body>
</html>
